<!--开启页面选项卡后，显示为选项卡标题-->
<title>Banner</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>运维管理</cite></a>
    <a><cite>BANNER</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_banner_search">
        <div class="layui-inline">
          <button id="btn_add_banner" class="layui-btn">
            <i class="layui-icon layui-icon-add-1"></i>添加BANNER
          </button>
        </div>
      </form>
    </div>
    <div class="layui-card-body">
      <table id="table_banner" lay-filter="table_banner"></table>
      <script type="text/html" id="tpl_image">
        <img src="{{d.image_url}}" layadmin-event="imagePreview" style="height: 25px"/>
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-red" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['table', 'form'], function () {
    let $ = layui.$
      , table = layui.table
      , admin = layui.admin
      , form = layui.form
      , view = layui.view

    let resourceUrl = 'agent-admin/banners'
      , defaultWhere = {}

    // 列表查询
    table.render({
      elem: '#table_banner'
      , url: resourceUrl
      , where: defaultWhere
      , page: true
      , cols: [[
        {title: '图片', templet: '#tpl_image', width: 100, align: "center"}
        , {title: '跳转链接', field: 'jump_url', width: 250}
        , {title: '备注', field: 'remark', minWidth: 100}
        , {title: '排序', field: 'sequence', width: 100}
        , {title: '修改时间', field: 'updated_at', width: 180, align: "center"}
        , {title: '操作', width: 200, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });

    //监听操作栏
    table.on('tool(table_banner)', function (obj) {
      let data = obj.data;
      //删除
      if (obj.event === 'del') {
        layer.confirm('确认删除该数据?', function (index) {
          admin.del(resourceUrl, data.id, function (res) {
            layer.close(index);
            table.reload('table_banner'); //重载表格
          })
        });
      }
      //编辑
      if (obj.event === 'edit') {
        showForm(data);
      }
    });

    //添加
    $('#btn_add_banner').click(function () {
      showForm();
      return false;
    });


    function showForm(data) {
      data = data || {};
      let minWidth = '800px';
      let minHeight = '650px';
      admin.popup({
        title: (data.id ? '修改' : '添加') + 'BANNER'
        , area: [minWidth, minHeight]
        , id: 'popup_banner'
        , success: function (layero, index) {
          view(this.id).render('ops/banner_form', data).done(function () {
            form.on('submit(submit_banner)', function (d) {
              layer.load();
              let field = d.field;
              admin.post(resourceUrl, field, function (res) {
                layer.closeAll();
                table.reload('table_banner');
              }, {hasLoading: true})
            })
          })
        }
      })
    }
  })
</script>

